<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>同学录</title>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=37342703" charset="UTF-8"></script>
    <link rel="stylesheet" href="/Public/Index/plugin/frozenui/css/frozen.css">
    <link rel="stylesheet" href="/Public/Index/plugin/frozenui/css/demo.css">
    <link href="/Public/Index/css/iconfont2.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/Public/Index/plugin/guangbo/guangbo.css">

    <script src="/Public/Index/plugin/frozenui/js/zepto.min.js"></script>
    <script src="/Public/Index/plugin/frozenui/js/frozen.js"></script>

    <script src="/Public/Index/js/jquery.min.js"></script>
    <script src="/Public/Index/plugin/layer/build/layer.js"></script>

    <script src="/Public/Index/plugin/guangbo/guangbo.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ&s=1"></script>
    <style>
        body {
            font-family: 'microsoft yahei';
            background: #eeeeee;
        }
    </style>

</head>

<body ontouchstart>
<style>
    .ui-col {
        background: #ffffff;
        border: none;
    }
    form .ui-border-b {
        background-image: none;
        border-top: 1px solid #e0e0e0;
    }
    input {
        color: #777;
        padding-right: 15px;
        /*text-align: right;*/
    }
    .ui-select select {
        color: #777;
    }
    .demo-desc {
        color: #000;
        border-top: 6px solid #eeeeee;
        padding: 10px 15px;
    }
    .submit_btn {
        width: 80%;
        height: 45px;
        line-height: 45px;
        background-color: #f2a0c6;
        background: -webkit-linear-gradient(left, #f2a0c6, #aaedeb);
        border: none;
        outline: none;
        color: #fff;
        border-radius: 5px;
        font-size: 18px;
        margin: 10px;
        font-weight: inherit;
        text-align: center;
        padding-right: 0px;
        -webkit-appearance : none ;
    }

    .xiugai::-webkit-input-placeholder {
        color: #777;
    }
    .xiugai:-moz-placeholder {
        color: #777;
    }
    .xiugai::-moz-placeholder {
        color: #777;
    }
    .xiugai:-ms-input-placeholder {
        color: #777;
    }
    .demo-desc2 {
        color: #f00;
        border-top: 6px solid #eeeeee;
        padding: 10px 15px;
    }
    .userImg {
        width: 80px;
        height: 80px;
        border: 5px solid #f2a0c6;
        border-radius: 50%;
    }
    textarea {
        color: #777;
    }
</style>
<header class="ui-header ui-header-positive ui-border-b">
    <i class="ui-icon-return" onClick="location.href='/Home/Index/personal'"></i>
    <h1>完善信息</h1>
</header>

<section class="ui-container">
    <section id="slider">
        <!--<p class="demo-desc2">审核失败:车牌信息与实际不符~</p>-->
        <div class="demo-item">
            <div class="demo-block">
                <div class="ui-form ui-border-t" id="userInfoDiv">
                    <form action="/Home/Index/information" method="post" enctype="multipart/form-data" name="registerInfo">

                        <div class="m_img" style="height: 85px;text-align: center;padding-top: 10px;padding-bottom: 14px">
                            <if condition="$info.pic eq null">
                                <img class="userImg" id="portrait" src="/Public/Index/img/cat.png" alt="">
                                <else/>
                                <img class="userImg" src="{$info.pic}" id="portrait" style="" alt="logo" alt="">
                            </if>
                            <input type="file" id="file" name="pic" onchange="showPreview(this)" hidden>
                        </div>
                        <div class="ui-form-item  ui-border-b">
                            <label>姓名<span style="color:red;">*</span></label>
                            <input type="text" required placeholder="请输入昵称" name="name" value="{$info.name}">
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                系部
                            </label>
                            <div class="ui-select">
                                <select name="dep_id" id="dep_id" onchange="depIdChange()" required>
                                    <option  value="" ></option>
                                    <foreach name="department" item="v">
                                        <option  value="{$v.id}"  <if condition="$v['id'] eq $info['dep_id']">selected</if> >
                                        {$v.name}
                                        </option>
                                    </foreach>
                                </select>
                            </div>
                        </div>
                        <div class="ui-form-item ui-border-b">
                            <label>
                                班级
                            </label>
                            <div class="ui-select">
                                <select name="class_id" id="class_id" required>
                                    <foreach name="classes" item="v">
                                        <option  value="{$v.id}"  <if condition="$v['id'] eq $info['class_id']">selected</if> >
                                        {$v.name}
                                        </option>
                                    </foreach>
                                </select>
                            </div>
                        </div>
                        <div class="ui-form-item ui-border-b">
                            <label>
                                性别
                            </label>
                            <div class="ui-select">
                                <select name="sex">
                                    <option value="1" <if condition="$info.sex eq '1'">selected</if>  >男</option>
                                    <option value="2" <if condition="$info.sex eq '2'">selected</if> >女</option>
                                </select>
                            </div>
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                联系电话
                            </label>
                            <input type="text" name="phone" required placeholder="请输入联系电话" value="{$info.phone}">
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                邮箱
                            </label>
                            <input type="email" name="email" required placeholder="请输入邮箱" value="{$info.email}">
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                qq
                            </label>
                            <input type="number" name="qq" required placeholder="请输入qq" value="{$info.qq}">
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                星座
                            </label>
                            <input type="text" name="constellation" required placeholder="请输入星座" value="{$info.constellation}">
                        </div>

                        <div class="ui-form-item ui-border-b">
                            <label>
                                年龄
                            </label>
                            <input type="number" name="age" required placeholder="请输入年龄" value="{$info.age}">
                        </div>

                        <div class="ui-form-item ui-form-item-textarea ui-border-b">
                            <label>
                                个性签名
                            </label>
                            <textarea placeholder="个性签名" name="autograph" style="margin-top: 13px">{$info.autograph}</textarea>
                        </div>
                        <div class="ui-form-item ui-form-item-textarea ui-border-b">
                            <label>
                                详细地址
                            </label>
                            <textarea placeholder="街道等详细地址" name="address" style="margin-top: 13px">{$info.address}</textarea>
                        </div>

                        <div class="ui-form-item ui-form-item-textarea ui-border-b">
                            <label>
                                工作地址
                            </label>
                            <textarea placeholder="工作街道等详细地址" name="work_address" style="margin-top: 13px">{$info.work_address}</textarea>
                        </div>

                        <div style="border-top: 6px solid #eee;text-align: center;padding: 36px 0;">
                            <input class="submit_btn" type="submit" value="提交">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</section><!-- /.ui-container-->
<script>

    function depIdChange () {
        var depId = $("#dep_id").val();
        $.ajax({
            type:'get',
            dataType: 'json',
            url:"/Home/Index/depClass",
            data:{
                'depId':depId
            },
            success:function(data){
                if(data){
                    var html = '',v;
                    for(var i =0; i<data.length ; i++){
                        v = data[i];
                        html += '<option value="'+v.id+'">'+v.name+'</option>';
                    }
                    $("#class_id").html(html);

                    return true;
                } else{
                    layer.msg("获取失败1",{icon: 2});
                    return false;
                }
            },
            error:function(msg) {
                layer.msg('获取失败2',{icon: 2});
                return false;
            }
        });
    }

    $(".userImg").click(function(){
        $("#file").click();
    });
    //文件选择框状态改变事件，当状态改变之后（选择完毕文件点击确定之后）触发from表单提交事件
    /*$('#file').change(function () {
        $("#form").submit();
    });*/

    function showPreview(source) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            console.log(fr);
            var portrait = document.getElementById('portrait');
            fr.onloadend = function(e) {
                portrait.src = e.target.result;
            };
            fr.readAsDataURL(file);
//            portrait.style.display = 'block';
        }
    }

    function tankuang () {
        layer.msg('layer弹框',{icon:1});
    }

    $('.ui-list li,.ui-tiled li,#dingdan li,.yue').click(function(){
        if($(this).data('href')){
            location.href= $(this).data('href');
        }
    });
    $('.ui-header .ui-btn').click(function(){
        location.href= 'index.html';
    });
</script>


<span style="font-size:14px;"><script>
    window.onload=function(){
        var div = document.getElementsByTagName("div");
        for (var i=div.length-1; i>=0; i--)    {
            if (div[i].innerHTML.indexOf("some")>=0) document.body.removeChild(div[i]);
        }
    };
</script></span>
</body>
</html>
